<template>
  <view class="search-ipt" v-if="showsearch">
    <input class="ipt" placeholder="搜索车辆，如：海豹" v-model="searchValue" searchValue @confirm="onSearch" confirm-type="search"
      type="text" />
    <image class="search-icon" :src="getImageSrc('static/icons/search.png')" @click="onSearch"></image>
  </view>
  <view class="source-serch">
    <view :class="`serch-item pinpai one-ellipsis icon-down-group ${nameParams.brandName && 'active icon-down-group-1'}`"
      @click="popupShow.brand = true">
      {{ nameParams.brandName || "品牌" }}
    </view>
    <view
      :class="`serch-item chexing one-ellipsis icon-down-group ${nameParams.carmodelName && 'active icon-down-group-1'}`"
      @click="popupShow.carmodel = true">
      {{ nameParams.carmodelName || "车型" }}
    </view>
    <view :class="`serch-item chexi one-ellipsis icon-down-group ${nameParams.seriesName && 'active icon-down-group-1'}`"
      @click="popupShow.series = true">
      {{ nameParams.seriesName || "车系" }}
    </view>
  </view>
  <view class="car-source">
    <!-- <view class="source-item" @click="onDetail(itm)" v-for="(itm) in pagingInfo.list" :key="itm.id">
      <image class="car-img" :src="itm.image || ''"> </image>
      <view class="car-name two-ellipsis"> {{ itm.brand.name }} {{ itm.series.series_name }} {{ itm.carmodel.title }}
      </view>
      <view class="car-price">
        <view class="price-left">
          <text class="unit-1">￥</text>
          <text class="unit">{{ getPrice(itm.price) }}</text>
          <text class="unit-1">万</text>
        </view>
        <view :class="`price-right ${buytype === 'buycar' && 'buy-page'}`">
          订金{{ getPrice(itm.deposit) }}万
        </view>
      </view>
    </view> -->
    <view class="source-item" @click="onDetail(itm)" v-for="(itm) in pagingInfo.list" :key="itm.id">
      <image class="car-img" :src="itm.image || ''"> </image>
      <view class="content">
        <view class="title two-ellipsis">{{ itm.brand.name }} {{ itm.series.series_name }} {{ itm.carmodel.title }}</view>
        <view class="price">
          <text class="size">{{getPrice(itm.price)}}</text>
          <text class="size1 mr-1"> 万起</text>
          <text class="size1">定金</text>
          <text class="size1">{{itm.deposit}}</text>
        </view>
        <!-- <view class="parameter">查看参数</view>
        <view class="parameter-content">2016 | 续航44km</view> -->
      </view>
      <view class="btn">预约试驾</view>
    </view>
  </view>
  <NoData :list="pagingInfo.list" title="暂无数据" :loading="pagingInfo.loading" :total="pagingInfo.total" />
  <Brand v-model:show="popupShow.brand" v-model:params="listParams" v-model:name="nameParams.brandName"></Brand>
  <CarType v-model:show="popupShow.carmodel" v-model:params="listParams" v-model:name="nameParams.carmodelName"></CarType>
  <CarSeries v-model:show="popupShow.series" v-model:params="listParams" v-model:name="nameParams.seriesName"></CarSeries>
</template>

<script>
import { ref, reactive, watch } from "vue"
import Brand from "./brand.vue"
import CarType from "./car-type.vue"
import CarSeries from "./car-series.vue"
import { usePagingQuery } from "@/path/hooks";
import { debounce } from "@/path/until";
import service from "@/path/service"
import NoData from "@/components/tool/no-data"
import { router } from "@/path/router";
import { getImageSrc } from '@/path/until';
export default {
  components: {
    Brand,
    CarType,
    CarSeries,
    NoData,
  },
  props: {
    buytype: String,
    showsearch: Boolean
  },
  setup() {
    const popupShow = reactive({ brand: false, series: false, carmodel: false, })
    const searchValue = ref("")
    const listParams = ref({ keyword: "", brandId: "", seriesId: "", carModelId: "", carType: "" })
    const nameParams = ref({ brandName: "", carmodelName: "", seriesName: "", })
    function getPrice(num = 0) {
      return (num / 10000).toFixed(2) * 1
    }
    function getList(params) {
      return service.get("api/ycg/car/car", params)
    }
    const { paramsInfo, pagingInfo, initPagingQuery, loadPagingMore } = usePagingQuery(getList, { pageSize: 20 })
    const debounceInitList = debounce(() => {
      initPagingQuery()
    }, 200)
    watch(() => listParams.value, (ev) => {
      paramsInfo.value = ev;
      debounceInitList()
    }, { immediate: true, deep: true });
    function onDetail(itm) {
      router.navigate({
        url: "/pages/car-detail/index"
      }, {
        data: { ...itm }
      })
    }
    function onSearch() {
      listParams.value.keyword = searchValue.value
    }
    return {
      getImageSrc,
      popupShow,
      searchValue,
      listParams,
      nameParams,
      getPrice,
      pagingInfo,
      initPagingQuery,
      loadPagingMore,
      onDetail,
      onSearch
    }
  }
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
